@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/demand/supplier_details.css')}}">
@section('content')
<div class="mainHrContent" id="demandsupplierdetails" v-cloak>
    <div class="storelistMain">
        <div class="storelistTitle">
            <span class="storelistTitle_left">
                <span>当前位置：</span>
                <span><a href="{{route('home.index.index') }}">首页</a> >
                    <a href="{{route('home.demand.demandList') }}">所有需求</a>
                    > @{{stepData.title}}
                </span>
            </span>
            <span class="storelistTitle_right">
                <span>找不到合适的供应商？发个需求试试？</span>
                <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
            </span>
        </div>
    </div>
    <div class="demandDtails">
        <div class="demandDtails_left">
            <div class="demanDetails_step">
                <div class="step_out desc" :class="{active:stepDataStep.length>=0}">客户发布需求</div>
                <div class="step_out desc asc" :class="{active:stepDataStep.length>=1}">供应商投标</div>
                <div class="step_out desc asc" :class="{active:stepDataStep.length>=2}">获得客户联系方式
                    提供解决方案</div>
                <div class="step_out desc asc" :class="{active:stepDataStep.length>=3}">达成合作，
                    与客户签订合同 </div>
                <div class="step_out asc" :class="{active:stepDataStep.length>=4}">上传合同，
                    并支付服务费</div>
            </div>
            <div class="demandDetails_main">
            <div class="detail_bg" v-if="stepData.bid==2 && (stepData.number != stepData.limit_num) && stepData.end_state == 0">投标中</div>
                <div class="detail_bg active" v-else>已完成</div>
                <div class="basicInfo_title">
                    <p class="jiaji" v-if="stepData.urgent==2">加急</p>
                    <p class="title">@{{stepData.title}}</p>
                    <!-- <img v-if="stepData.urgent==2" src="{{URL::asset('./img/icon/jiaji.png')}}" alt="..."> -->
                </div>
                <p class="detailPrice">预算金额 <span>@{{stepData.price}}万元</span></p>
                <div class="detailTime">截止时间：@{{stepData.end_at}} &nbsp;&nbsp;&nbsp;&nbsp; 如需要投标，请在截止时间前投标</div>
                <div class="detailArea">
                    <p class="text">需求区域：重庆</p>
                    <p class="text1">当前竞标状况：<span class="active">总竞标名额：@{{stepData.limit_num}}</span>&nbsp;&nbsp;&nbsp;<span>剩余竞标名额：@{{stepData.limit_num - stepData.number || 0}}</span></p>
                </div>
            </div>
            <div class="demandDetails_main">
                <div class="basicInfo_title">
                    <p class="title" style="font-size:18px">其他信息</p>
                </div>
                <div class="detailMsg">
                    <p class="text">发布时间：@{{stepData.start_at}}</p>
                    <p class="text">公司名称：@{{stepData.company_name}}</p>
                    <p class="text">公司类型：@{{stepData.company_type}}</p>
                    <p class="text">公司行业：@{{stepData.company_industry}}</p>
                    <p class="text">公司规模：@{{stepData.company_size}}</p>
                    <p class="text">需求描述：</p>
                    <p class="text">@{{stepData.content}}</p>
                </div>
            </div>
            <div class="demandDetails_main">
                <div class="basicInfo_title" style="margin-bottom:20px !important">
                    <span></span>
                    订单状态
                    <button @click="dialogTel=true" v-if="stepDataStep.length>1">
                        <img src="{{URL::asset('./img/icon/demondTel.png')}}" alt="...">
                        联系雇主
                    </button>
                </div>
                <div class="demandDetails_main_content">
                    <el-timeline>
                        <el-timeline-item placement="top" v-for="(item, index) in stepDataStep" :key="index" color="rgb(209,0,24)" size="large" :timestamp="item.times">
                            <!-- 供应商第一步   -->
                            <div class="timelineContent" v-if="stepDataStep.length==1  && item.index==1">
                                <div class="demandDetails_title">
                                    <span>
                                        @{{item.content}}
                                    </span>

                                    <button v-if="item.btn == true" @click="getPrice">立即投标</button>
                                    {{--<button v-if="stepData.bid == 2 && (stepData.number != stepData.limit_num)" @click="getPrice">立即投标</button>--}}
                                    {{--<button v-else>已完成</button>--}}
                                </div>
                                <div class="demandDetails_mes">
                                    <i></i>
                                    <span>
                                        @{{item.dec}}
                                    </span>
                                </div>
                            </div>
                            <!-- 供应商第二步 -->
                            <div class="timelineContent" v-if="stepDataStep.length==2 && item.index==1">
                                <div class="demandDetails_title">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                                <div class="demandDetails_mes">
                                    <i></i>
                                    <span>
                                        @{{item.dec}}

                                    </span>
                                </div>
                            </div>
                            <!-- 供应商第二步 -->
                            <div class="timelineContent" v-if="stepDataStep.length==2 && item.index==2">
                                <div class="demandDetails_title">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                            </div>
                            <!-- 供应商第三、四、五步 -->
                            <div class="timelineContent" v-if="(stepDataStep.length==3 || stepDataStep.length==4 || stepDataStep.length==5) && item.index==1">
                                <div class="demandDetails_title active">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                            </div>
                            <!-- 供应商第三、四、五步 -->
                            <div class="timelineContent" v-if="(stepDataStep.length==3 || stepDataStep.length==4 ||  stepDataStep.length==5) && item.index==2">
                                <div class="demandDetails_title active">
                                    <span>
                                        @{{item.content}}
                                    </span>

                                </div>
                            </div>
                            <!-- 供应商第三步 -->
                            <div class="timelineContent" v-if="stepDataStep.length==3 && item.index==3">
                                <div class="demandDetails_title">
                                    <span>
                                    </span>
                                    @{{item.content}}
                                    </span>
                                    <button v-if="item.btn" @click="dialogContract=true">上传合同</button>
                                </div>
                                <!-- <div class="demandDetails_mes">
                                    <i></i>
                                    <span>
                                        @{{item.dec}}
                                    </span>
                                </div> -->
                            </div>
                            <!-- 供应商第四、五步 -->
                            <div class="timelineContent" v-if="(stepDataStep.length==4 ||stepDataStep.length==5) && item.index==3">
                                <div class="demandDetails_title active">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                            </div>
                            <!-- 供应商第四步 -->
                            <div class="timelineContent" v-if="stepDataStep.length==4 && item.index==4">
                                <div class="demandDetails_title">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                                <div class="demandDetails_mes">
                                    <i></i>
                                    <span v-if="stepDataStep.length < 5" id="desc">
                                        <!-- @{{desc}} -->
                                    </span>
                                </div>
                            </div>
                            <!-- 供应商第五步 -->
                            <div class="timelineContent" v-if="stepDataStep.length==5 && item.index==4">
                                <div class="demandDetails_title active">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                            </div>
                            <!-- 供应商第五步 -->
                            <div class="timelineContent" v-if="stepDataStep.length==5 && item.index==5">
                                <div class="demandDetails_title">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
        </div>
        <div class="demandDtails_right">
            <div class="demandLight">
                <img src="{{URL::asset('./img/icon/demandLight.png')}}">
                该类型的其他需求
            </div>
            <div class="demandLightList" v-for="item in rightData">
                <p class="rightTitle">@{{item.title}}</p>
                <div class="priceBox">
                    <p class="text">￥@{{item.price}}万元</p>
                    <a :href="'{{route('home.demand.demandSupplierDetails') }}?demandId='+item.id+'&cid='+cid" class="text1">详情 ></a>
                </div>
            </div>
        </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="508px" :before-close="handleClose">
        <div class="basicInfo_title">
            <span></span>
            投标
            <a class="dialogFalse" @click="handleClose">×</a>
        </div>
        <div class="dialogMain">
            <p class="logTitle">
                付费投标：本次投标将会扣除您<a>@{{stepData.bid_costs}}</a>元
            </p>
            <p class="logMes">
                您当前的余额不足，请充值后投标！
            </p>
            <div class="logButton">
                <button class="logButton_white" @click="dialogVisible=false">取消</button>
                <button class="logButton_red"><a href="{{route('home.suppliermy.supplierBalanceAdd') }}">立即充值</a></button>
            </div>
        </div>
    </el-dialog>
    <el-dialog :visible.sync="contVisible" width="508px" :before-close="handleClose">
        <div class="basicInfo_title">
            <span></span>
            是否继续投标
            <a class="dialogFalse" @click="handleClose">×</a>
        </div>
        <div class="dialogMain">
            <p class="logTitle">
                付费投标：本次投标将会扣除您<a>@{{stepData.bid_costs}}</a>元
            </p>
            <div class="logButton">
                <button class="logButton_white" @click="contVisible=false">取消</button>
                <button class="logButton_red" @click="jixu"><a href="javascript:void(0)">继续投标</a></button>
            </div>
        </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogTel" width="508px" :before-close="handleClose">
        <div class="basicInfo_title">
            <span></span>
            获取联系电话
            <a class="dialogFalse" @click="handleClose">×</a>
        </div>
        <div class="dialogMainTel">
            <em>@{{ stepDataStep[1]?stepDataStep[1].link_phone:'' }}</em>
            <span>@{{stepDataStep[1]? stepDataStep[1].link_name:'' }}</span>
        </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogContract" width="508px" :before-close="handleClose">
        <div class="basicInfo_title">
            <span></span>
            上传合同
            <a class="dialogFalse" @click="handleClose">×</a>
        </div>
        <div class="dialogMainContract">
            <el-form :model="form" label-position="top" size="mini" :rules="rules" ref="ruleForm">
                <el-form-item prop="price">
                    <p><span><em>*</em>合同总金额：</span>
                        <el-input size="mini" v-model="form.price"></el-input>元
                    </p>
                </el-form-item>
                <p><span>服务费比例：</span><em>@{{stepData.service_charge}}%</em></p>
                <p><span>服务费金额：</span><em>@{{(form.price*(parseInt(stepData.service_charge)/100)).toFixed(2)}}</em>&nbsp;&nbsp;元</p>
                <el-form-item prop="contract_at">
                    <p><span><em>*</em>签订合同日期：</span>
                        <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeTime" v-model="form.contract_at" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </p>
                </el-form-item>
                <p><span>支付截止日期：</span><em style="color:#D10018">@{{end_at}}</em></p>
                <el-form-item prop="contract_documents">
                    <p style="align-items: flex-start;"><span>
                            <em>*</em>合同文件：
                        </span>
                        <el-upload class="upload-demo" :action="uploadUrl" :on-remove="handleRemove" :on-success="handleAvatarSuccess" :limit='1' :before-upload="beforeAvatarUpload" :file-list="form.contract_documents">
                            <span class="dialogUpload">
                                <span>
                                    <img src="{{URL::asset('./img/icon/dialogUpload.png')}}">

                                </span>
                                <span>文件需为：jpg、png、pdf格式</span>
                            </span>
                        </el-upload>
                    </p>
                </el-form-item>
            </el-form>
        </div>
        <button class="contractButton" @click="submitForm('ruleForm')">确定上传</button>
    </el-dialog>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let demandsupplierdetails = new Vue({
            el: '#demandsupplierdetails',
            data: () => {
                return {
                    dialogVisible: false,
                    contVisible: false,
                    dialogTel: false,
                    uploadUrl: UPLOAD_FILE,
                    cid: getQueryString("cid") || '',
                    demandId: getQueryString("demandId"),
                    dialogContract: false,
                    fileList3: [],
                    rightData: [],
                    end_at: '请选择合同签订日期',
                    desc: '',
                    form: {
                        price: 0,
                        contract_at: '',
                        contract_documents: ''
                    },
                    stepData: {},
                    stepDataArea: {},
                    stepDataStep: [],
                    rules: {
                        price: [{
                            required: true,
                            validator: validatePrice1,
                            trigger: 'blur'
                        }],
                        contract_at: [{
                            required: true,
                            message: '请选择日期',
                            trigger: 'change'
                        }],
                        contract_documents: [{
                            required: true,
                            message: '请选择文件',
                            trigger: 'change'
                        }],
                    }
                }
            },
            created() {
                this.getDetails();
                let data = {
                    cid: getQueryString("cid")
                }
                apiAjax("{{ route('home.demand.rightRecommendDemandApi')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.rightData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
            },
            mounted() {

            },
            methods: {
                timeDown(endDateStr) {
                    if (endDateStr > 1000) {
                        const that = this
                        //结束时间
                        var endDate = new Date(endDateStr);
                        //当前时间
                        var nowDate = new Date();
                        //相差的总秒数
                        var totalSeconds = parseInt((endDate - nowDate) / 1000);
                        //天数
                        var days = Math.floor(totalSeconds / (60 * 60 * 24));
                        //取模（余数）
                        var modulo = totalSeconds % (60 * 60 * 24);
                        //小时数
                        var hours = Math.floor(modulo / (60 * 60));
                        modulo = modulo % (60 * 60);
                        //分钟
                        var minutes = Math.floor(modulo / 60);
                        //秒
                        var seconds = modulo % 60;
                        //输出到页面
                        that.desc = `<span>您需要在</span><span style="color:red">${days}</span>天<span style="color:red">${hours}</span>小时<span style="color:red">${minutes}</span>分钟<span style="color:red">${seconds}</span>秒内支付服务费用`
                        $("#desc").html(that.desc)
                        //延迟一秒执行自己
                        setTimeout(function() {
                            that.timeDown(endDateStr);
                        }, 1000)
                    } else {
                        $("#desc").html("已超过支付时间")
                    }
                },
                changeTime(e) {
                    let time = new Date(e).getTime()
                    let date = new Date(time + this.stepData.end_day * 24 * 60 * 60 * 1000)
                    this.end_at = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
                    console.log(this.end_at)
                },
                // 查询详情
                getDetails() {
                    let data = {
                        demand_id: this.demandId,
                    }
                    apiAjax("{{ route('home.demand.demandSupplierStepApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.stepData = res.data;
                            this.stepDataArea = res.data.area;
                            this.stepDataStep = res.data.step;
                            if (this.stepDataStep.length && this.stepDataStep.length == 4) {
                                this.timeDown(this.stepDataStep[3].dec * 1000)
                            }
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                jixu() {
                    this.contVisible = false;
                    let data = {
                        demand_id: this.stepData.id,
                    };
                    apiAjax("{{ route('home.demand.demandSupplierBidApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getDetails();
                        } else if (res.code == 117) {
                            this.dialogVisible = true;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                //投标验证余额是否充足
                getPrice() {
                    this.contVisible = true;
                },
                //上传合同（第三部）
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let data = {
                                demand_id: this.demandId,
                                bid_id: this.stepDataStep[1].bid_id,
                                contract_documents: this.form.contract_documents,
                                contract_price: this.form.price,
                                bid_fee: this.stepData.service_charge,
                                contract_at: this.form.contract_at,
                                pay_end_at: this.end_at,
                            }
                            apiAjax("{{ route('home.demand.demandUploadContractApi')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                    this.dialogContract = false;
                                    this.getDetails();
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                            }, (erro) => {

                            });
                        } else {
                            return false;
                        }
                    });

                },

                handleClose(done) {
                    this.dialogVisible = false;
                    this.dialogTel = false;
                    this.dialogContract = false;
                    this.contVisible = false;
                },
                beforeAvatarUpload(file) {
                    const type = file.name.split('.')[1];
                    const isJPG = type == 'pdf' || 'jpg' || 'png';
                    // const isJPG = file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                    //     file.type == 'pdf';

                    if (!isJPG) {
                        this.$message.error('上传文件格式只能是图片或者PDF!');
                    }
                    return isJPG;
                },
                handleAvatarSuccess(res, file) {
                    this.form.contract_documents = res.data.path
                },
                handleRemove(file, fileList) {
                    this.form.contract_documents = [];
                    fileList.forEach(element => {
                        this.form.contract_documents = element.response.data.path;
                    });
                },
            }
        })
    })
</script>
@endsection